<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Class: Extent</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
    <link type="text/css" rel="stylesheet" href="styles/custom.css">
    <!--[if lt IE 9]>
    <script src="scripts/html5shiv.min.js"></script>
    <script src="scripts/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div style="position:fixed;top:0px;left:0px;"><h1 class="page-title">Class: Extent</h1></div>
<div id="main" style="margin-top:77px;">
    





<nav class="classnav scroll-styled">

    <h5><a href="#main" style="color:#000">class : Extent</a></h5>
    
        <h5>Members</h5>
        <ul>
        
            <li><a href="#xmin">xmin</a></li>
        
            <li><a href="#xmax">xmax</a></li>
        
            <li><a href="#ymin">ymin</a></li>
        
            <li><a href="#ymax">ymax</a></li>
        
        </ul>
    

    

        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
        <h5>Methods</h5>
        <ul>
        
            
                <li><a href="#add">
            
                add</a></li>
        
            
                <li><a href="#sub">
            
                sub</a></li>
        
            
                <li><a href="#substract">
            
                substract</a></li>
        
            
                <li><a href="#round">
            
                round</a></li>
        
            
                <li><a href="#getMin">
            
                getMin</a></li>
        
            
                <li><a href="#getMax">
            
                getMax</a></li>
        
            
                <li><a href="#getCenter">
            
                getCenter</a></li>
        
            
                <li><a href="#isValid">
            
                isValid</a></li>
        
            
                <li><a href="#equals">
            
                equals</a></li>
        
            
                <li><a href="#intersects">
            
                intersects</a></li>
        
            
                <li><a href="#within">
            
                within</a></li>
        
            
                <li><a href="#contains">
            
                contains</a></li>
        
            
                <li><a href="#getWidth">
            
                getWidth</a></li>
        
            
                <li><a href="#getHeight">
            
                getHeight</a></li>
        
            
                <li><a href="#getSize">
            
                getSize</a></li>
        
            
                <li><a href="#combine">
            
                combine</a></li>
        
            
                <li><a href="#intersection">
            
                intersection</a></li>
        
            
                <li><a href="#expand">
            
                expand</a></li>
        
            
                <li><a href="#toJSON">
            
                toJSON</a></li>
        
            
                <li><a href="#toArray">
            
                toArray</a></li>
        
            
                <li><a href="#copy">
            
                copy</a></li>
        
            
                <li><a href="#convertTo">
            
                convertTo</a></li>
        
        </ul>
    

    
</nav>


<section class="classmain">
    


<header>
    
        <h2>Extent</h2>
        
            <div class="class-description">Represent a bounding box on the map, a rectangular geographical area with minimum and maximum coordinates. <br>There are serveral ways to create a extent:</div>
        
    
</header>

<article>
    <div class="container-overview">
    
        

    <!-- <h2>Constructor</h2> -->
    
    <h4 class="name" id="Extent"><span class="type-signature"></span>new <a href="#Extent">Extent</a><span class="signature">(x1, y1, x2, y2)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L40" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L40" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#Extent" class="improvelink">[link]</a> -->
    </h4>

    
    





    <!--<h5>Examples:</h5>-->
    
    
        <pre class="prettyprint"><code>//with 4 numbers: xmin, ymin, xmax and ymaxvar extent = new Extent(100, 10, 120, 20);</code></pre>
    

    
        <pre class="prettyprint"><code>//with 2 coordinatesvar extent = new Extent(new Coordinate(100, 10), new Coordinate(120, 20));</code></pre>
    

    
        <pre class="prettyprint"><code>//with a json object containing xmin, ymin, xmax and ymaxvar extent = new Extent({xmin : 100, ymin: 10, xmax: 120, ymax:20});</code></pre>
    

    
        <pre class="prettyprint"><code>var extent1 = new Extent(100, 10, 120, 20);//with another extentvar extent2 = new Extent(extent1);</code></pre>
    




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>x1</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">x of coordinate 1</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>y1</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">y of coordinate 1</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>x2</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">x of coordinate 2</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>y2</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">y of coordinate 2</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->






























<hr>
    
    </div>

    <!--  -->

    

    

     

    

    
        <h3 class="subsection-title">Members</h3>

        
            
<li>
<h4 class="name" id="xmin"><span class="type-signature"></span>xmin<span class="type-signature"></span>

<!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L63" class="improvelink">[help to improve]</a>
    
    <a href="#xmin" class="improvelink">[link]</a></h4> -->
</li>














    <h5 class="subsection-title">Properties:</h5>

    

<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>



        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>xmin</code>
                    
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>



            

            <td class="description last">minimum x</td>
        </tr>

    
    </tbody>
</table>



<dl class="details">

    

    

    

    

    

        

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js">geo/Extent.js</a>, <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L63">line 63</a>
        

    </li></ul></dd>
    

    

    

    
</dl>






<hr>
        
            
<li>
<h4 class="name" id="xmax"><span class="type-signature"></span>xmax<span class="type-signature"></span>

<!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L67" class="improvelink">[help to improve]</a>
    
    <a href="#xmax" class="improvelink">[link]</a></h4> -->
</li>














    <h5 class="subsection-title">Properties:</h5>

    

<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>



        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>xmax</code>
                    
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>



            

            <td class="description last">maximum x</td>
        </tr>

    
    </tbody>
</table>



<dl class="details">

    

    

    

    

    

        

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js">geo/Extent.js</a>, <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L67">line 67</a>
        

    </li></ul></dd>
    

    

    

    
</dl>






<hr>
        
            
<li>
<h4 class="name" id="ymin"><span class="type-signature"></span>ymin<span class="type-signature"></span>

<!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L71" class="improvelink">[help to improve]</a>
    
    <a href="#ymin" class="improvelink">[link]</a></h4> -->
</li>














    <h5 class="subsection-title">Properties:</h5>

    

<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>



        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>ymin</code>
                    
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>



            

            <td class="description last">minimum y</td>
        </tr>

    
    </tbody>
</table>



<dl class="details">

    

    

    

    

    

        

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js">geo/Extent.js</a>, <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L71">line 71</a>
        

    </li></ul></dd>
    

    

    

    
</dl>






<hr>
        
            
<li>
<h4 class="name" id="ymax"><span class="type-signature"></span>ymax<span class="type-signature"></span>

<!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L75" class="improvelink">[help to improve]</a>
    
    <a href="#ymax" class="improvelink">[link]</a></h4> -->
</li>














    <h5 class="subsection-title">Properties:</h5>

    

<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>



        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>ymax</code>
                    
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>



            

            <td class="description last">maximum y</td>
        </tr>

    
    </tbody>
</table>



<dl class="details">

    

    

    

    

    

        

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js">geo/Extent.js</a>, <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L75">line 75</a>
        

    </li></ul></dd>
    

    

    

    
</dl>






<hr>
        
    

    
        

        
                    <h3 class="subsection-title">Methods</h3>
                
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="add"><span class="type-signature"></span><a href="#add">add</a><span class="signature">(p)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L165" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L165" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#add" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Add the extent with a coordinate or a point.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>p</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Coordinate.html">Coordinate</a></span>
|

<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last">point or coordinate to add</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        
<!-- <div class="param-desc"> -->
    a new extent
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="sub"><span class="type-signature"></span><a href="#sub">sub</a><span class="signature">(p)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L209" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L209" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#sub" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Substract the extent with a coordinate or a point.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>p</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Coordinate.html">Coordinate</a></span>
|

<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last">point or coordinate to substract</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        
<!-- <div class="param-desc"> -->
    a new extent
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="substract"><span class="type-signature"></span><a href="#substract">substract</a><span class="signature">(p)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L219" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L219" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#substract" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Alias for sub
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>p</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Coordinate.html">Coordinate</a></span>
|

<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last">point or coordinate to substract</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        
<!-- <div class="param-desc"> -->
    a new extent
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="round"><span class="type-signature"></span><a href="#round">round</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L228" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L228" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#round" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Round the extent
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        
<!-- <div class="param-desc"> -->
    rounded extent
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="getMin"><span class="type-signature"></span><a href="#getMin">getMin</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L247" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L247" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getMin" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get the minimum point
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Coordinate.html">Coordinate</a></span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="getMax"><span class="type-signature"></span><a href="#getMax">getMax</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L260" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L260" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getMax" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get the maximum point
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Coordinate.html">Coordinate</a></span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="getCenter"><span class="type-signature"></span><a href="#getCenter">getCenter</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L273" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L273" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getCenter" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get center of the extent.
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Coordinate.html">Coordinate</a></span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="isValid"><span class="type-signature">(protected) </span><a href="#isValid">isValid</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L288" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L288" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#isValid" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether the extent is valid
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="equals"><span class="type-signature"></span><a href="#equals">equals</a><span class="signature">(ext2)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L300" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L300" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#equals" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Compare with another extent to see whether they are equal.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>ext2</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Extent.html">Extent</a></span>


            
            </td>

            

            <td class="description last">extent to compare</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="intersects"><span class="type-signature"></span><a href="#intersects">intersects</a><span class="signature">(ext2)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L312" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L312" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#intersects" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether it intersects with another extent
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>ext2</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Extent.html">Extent</a></span>


            
            </td>

            

            <td class="description last">another extent</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="within"><span class="type-signature"></span><a href="#within">within</a><span class="signature">(ext2)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L328" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L328" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#within" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether the extent is within another extent
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>ext2</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Extent.html">Extent</a></span>


            
            </td>

            

            <td class="description last">another extent</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="contains"><span class="type-signature"></span><a href="#contains">contains</a><span class="signature">(coordinate)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L339" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L339" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#contains" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Whether the extent contains the input point.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>coordinate</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Coordinate.html">Coordinate</a></span>
|

<span class="param-type">Array.&lt;Number></span>


            
            </td>

            

            <td class="description last">input point</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="getWidth"><span class="type-signature"></span><a href="#getWidth">getWidth</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L370" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L370" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getWidth" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get the width of the Extent
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Number</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="getHeight"><span class="type-signature"></span><a href="#getHeight">getHeight</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L378" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L378" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getHeight" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get the height of the Extent
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Number</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="getSize"><span class="type-signature"></span><a href="#getSize">getSize</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L386" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L386" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getSize" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get size of the Extent
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Size.html">Size</a></span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="combine"><span class="type-signature"></span><a href="#combine">combine</a><span class="signature">(extent)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L453" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L453" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#combine" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Combine it with another extent to a larger extent.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>extent</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Extent.html">Extent</a></span>
|

<span class="param-type"><a href="Coordinate.html">Coordinate</a></span>
|

<span class="param-type"><a href="Point.html">Point</a></span>


            
            </td>

            

            <td class="description last">extent/coordinate/point to combine into</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        
<!-- <div class="param-desc"> -->
    extent combined
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="intersection"><span class="type-signature"></span><a href="#intersection">intersection</a><span class="signature">(extent)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L466" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L466" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#intersection" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Gets the intersection extent of this and another extent.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>extent</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Extent.html">Extent</a></span>


            
            </td>

            

            <td class="description last">another extent</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        
<!-- <div class="param-desc"> -->
    intersection extent
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="expand"><span class="type-signature"></span><a href="#expand">expand</a><span class="signature">(distance)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L489" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L489" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#expand" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Expand the extent by distance
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>distance</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Size.html">Size</a></span>
|

<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">distance to expand</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        
<!-- <div class="param-desc"> -->
    a new extent expanded from
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="toJSON"><span class="type-signature"></span><a href="#toJSON">toJSON</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L523" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L523" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#toJSON" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get extent's JSON object.
</div>


    <!--<h5>Example:</h5>-->
    
    
        <pre class="prettyprint"><code>// {xmin : 100, ymin: 10, xmax: 120, ymax:20}var json = extent.toJSON();</code></pre>
    




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object</span>:

        
<!-- <div class="param-desc"> -->
    jsonObject
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="toArray"><span class="type-signature"></span><a href="#toArray">toArray</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L536" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L536" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#toArray" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get a coordinate array of extent's rectangle area, containing 5 coordinates in which the first equals with the last.
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Array.&lt;<a href="Coordinate.html">Coordinate</a>></span>:

        
<!-- <div class="param-desc"> -->
    coordinates array
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="copy"><span class="type-signature"></span><a href="#copy">copy</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L556" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L556" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#copy" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Get a copy of the extent.
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        
<!-- <div class="param-desc"> -->
    copy
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="convertTo"><span class="type-signature"></span><a href="#convertTo">convertTo</a><span class="signature">(fn)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L565" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Extent.js#L565" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#convertTo" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Convert to a new extent
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>fn</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            

            <td class="description last">convert function on each point</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Extent.html">Extent</a></span>:

        


    


<hr>
        
    

    

    
</article>

</section>




</div>

<nav class="page-nav">
    <h2><a href="index.html">V0.49.1</a></h2><h4>Classes</h4><ul></ul><h5>Map</h5><ul><li><a href="Map.html">Map</a></li></ul><h5>Layer</h5><ul><li><a href="Layer.html">Layer</a></li><li><a href="TileSystem.html">TileSystem</a></li><li><a href="TileLayer.html">TileLayer</a></li><li><a href="GroupTileLayer.html">GroupTileLayer</a></li><li><a href="WMSTileLayer.html">WMSTileLayer</a></li><li><a href="OverlayLayer.html">OverlayLayer</a></li><li><a href="VectorLayer.html">VectorLayer</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="ParticleLayer.html">ParticleLayer</a></li><li><a href="ImageLayer.html">ImageLayer</a></li></ul><h5>Geometry</h5><ul><li><a href="Geometry.html">Geometry</a></li><li><a href="Path.html">Path</a></li><li><a href="Marker.html">Marker</a></li><li><a href="TextMarker.html">TextMarker</a></li><li><a href="Label.html">Label</a></li><li><a href="TextBox.html">TextBox</a></li><li><a href="Polygon.html">Polygon</a></li><li><a href="LineString.html">LineString</a></li><li><a href="Curve.html">Curve</a></li><li><a href="ArcCurve.html">ArcCurve</a></li><li><a href="QuadBezierCurve.html">QuadBezierCurve</a></li><li><a href="CubicBezierCurve.html">CubicBezierCurve</a></li><li><a href="ConnectorLine.html">ConnectorLine</a></li><li><a href="ArcConnectorLine.html">ArcConnectorLine</a></li><li><a href="Ellipse.html">Ellipse</a></li><li><a href="Circle.html">Circle</a></li><li><a href="Sector.html">Sector</a></li><li><a href="Rectangle.html">Rectangle</a></li><li><a href="GeometryCollection.html">GeometryCollection</a></li><li><a href="MultiGeometry.html">MultiGeometry</a></li><li><a href="MultiPoint.html">MultiPoint</a></li><li><a href="MultiLineString.html">MultiLineString</a></li><li><a href="MultiPolygon.html">MultiPolygon</a></li><li><a href="GeoJSON.html">GeoJSON</a></li><li><a href="GeometryEditor.html">GeometryEditor</a></li></ul><h5>Basic types</h5><ul><li><a href="Coordinate.html">Coordinate</a></li><li><a href="Extent.html">Extent</a></li><li><a href="Point.html">Point</a></li><li><a href="PointExtent.html">PointExtent</a></li><li><a href="Position.html">Position</a></li><li><a href="Size.html">Size</a></li></ul><h5>Maptool</h5><ul><li><a href="MapTool.html">MapTool</a></li><li><a href="DrawTool.html">DrawTool</a></li><li><a href="DistanceTool.html">DistanceTool</a></li><li><a href="AreaTool.html">AreaTool</a></li></ul><h5>Ui</h5><ul><li><a href="ui.UIComponent.html">ui.UIComponent</a></li><li><a href="ui.UIMarker.html">ui.UIMarker</a></li><li><a href="ui.InfoWindow.html">ui.InfoWindow</a></li><li><a href="ui.ToolTip.html">ui.ToolTip</a></li><li><a href="ui.Menu.html">ui.Menu</a></li></ul><h5>Control</h5><ul><li><a href="control.Control.html">control.Control</a></li><li><a href="control.Zoom.html">control.Zoom</a></li><li><a href="control.LayerSwitcher.html">control.LayerSwitcher</a></li><li><a href="control.Attribution.html">control.Attribution</a></li><li><a href="control.Scale.html">control.Scale</a></li><li><a href="control.Panel.html">control.Panel</a></li><li><a href="control.Toolbar.html">control.Toolbar</a></li><li><a href="control.Overview.html">control.Overview</a></li></ul><h5>Core</h5><ul><li><a href="Ajax.html">Ajax</a></li><li><a href="Class.html">Class</a></li><li><a href="MapboxUtil.html">MapboxUtil</a></li><li><a href="Util.html">Util</a></li><li><a href="DomUtil.html">DomUtil</a></li><li><a href="StringUtil.html">StringUtil</a></li></ul><h5>Animation</h5><ul><li><a href="animation.Easing.html">animation.Easing</a></li><li><a href="animation.Frame.html">animation.Frame</a></li><li><a href="animation.Player.html">animation.Player</a></li><li><a href="animation.Animation.html">animation.Animation</a></li></ul><h5>Geo</h5><ul><li><a href="CRS.html">CRS</a></li><li><a href="measurer.Identity.html">measurer.Identity</a></li><li><a href="measurer.DEFAULT.html">measurer.DEFAULT</a></li><li><a href="measurer.Measurer.html">measurer.Measurer</a></li><li><a href="measurer.WGS84Sphere.html">measurer.WGS84Sphere</a></li><li><a href="measurer.BaiduSphere.html">measurer.BaiduSphere</a></li><li><a href="projection.DEFAULT.html">projection.DEFAULT</a></li><li><a href="projection.BAIDU.html">projection.BAIDU</a></li><li><a href="projection.EPSG3857.html">projection.EPSG3857</a></li><li><a href="projection.EPSG4326.html">projection.EPSG4326</a></li><li><a href="projection.EPSG4490.html">projection.EPSG4490</a></li><li><a href="projection.IDENTITY.html">projection.IDENTITY</a></li><li><a href="Transformation.html">Transformation</a></li></ul><h5>Handler</h5><ul><li><a href="Handler.html">Handler</a></li><li><a href="DragHandler.html">DragHandler</a></li></ul><h5>Other</h5><ul><li><a href="renderer.CanvasRenderer.html">renderer.CanvasRenderer</a></li></ul><h4>Namespaces</h4><ul><li><a href="measurer.html">measurer</a></li><li><a href="projection.html">projection</a></li><li><a href="renderer.html">renderer</a></li></ul><h4>Mixins</h4><ul><li><a href="Eventable.html">Eventable</a></li><li><a href="JSONAble.html">JSONAble</a></li><li><a href="measurer.Common.html">measurer.Common</a></li><li><a href="projection.Common.html">projection.Common</a></li><li><a href="Handlerable.html">Handlerable</a></li><li><a href="CenterMixin.html">CenterMixin</a></li><li><a href="TextEditable.html">TextEditable</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="ui.Menuable.html">ui.Menuable</a></li></ul><h3>Global</h3><ul><li><a href="global.html#INTERNAL_LAYER_PREFIX">INTERNAL_LAYER_PREFIX</a></li><li><a href="global.html#RESOURCE_PROPERTIES">RESOURCE_PROPERTIES</a></li><li><a href="global.html#RESOURCE_SIZE_PROPERTIES">RESOURCE_SIZE_PROPERTIES</a></li><li><a href="global.html#NUMERICAL_PROPERTIES">NUMERICAL_PROPERTIES</a></li><li><a href="global.html#COLOR_PROPERTIES">COLOR_PROPERTIES</a></li><li><a href="global.html#getListeningEvents">getListeningEvents</a></li><li><a href="global.html#isEmpty">isEmpty</a></li><li><a href="global.html#IS_NODE">IS_NODE</a></li><li><a href="global.html#identity">identity</a></li><li><a href="global.html#copy">copy</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#add">add</a></li><li><a href="global.html#subtract">subtract</a></li><li><a href="global.html#length">length</a></li><li><a href="global.html#normalize">normalize</a></li><li><a href="global.html#dot">dot</a></li><li><a href="global.html#scale">scale</a></li><li><a href="global.html#cross">cross</a></li><li><a href="global.html#distance">distance</a></li><li><a href="global.html#transformMat4">transformMat4</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Mon Sep 07 2020 17:52:17 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>

</body>
</html>